<template>
    <div class="layered-map-wrap">
        <h3 class="device-subtitle">分层图</h3>
        <div class="close-btn" @click="closeLayer"></div>
        <div class="fencengtu-pic-parent">
            <div class="fencengtu-pic" 
                :model="layerPic" 
                :style="{
                    backgroundImage: 'url(' + layerPic + ')', 
                    backgroundSize:'100% 100%',
                    backgroundRepeat:'no-repeat'
                }">
                <el-popover v-for="item in markData" :key="item.xAxis"
                    placement="top-start"
                    trigger="hover"
                    popper-class="layered-map-maker-popper"
                    :visible-arrow="false"
                    :title="item.makeName">
                    <div>
                        物联设备-{{ item.relateFcfNames }}
                    </div>
                    <img slot="reference"
                    v-if ="item.url"
                    :src="item.url"
                    :style="{
                        display: 'block',
                        width:( smallLayer.markerW * smallLayer.zoomPercent ) +'px',
                        height:( smallLayer.markerH * smallLayer.zoomPercent ) +'px',
                        position:'absolute',
                        left:item.xAxis + '%',
                        top:item.yAxis + '%',
                        cursor:'pointer',
                        marginTop:'-' + ( smallLayer.markerW * smallLayer.zoomPercent )/2 + 'px',
                        marginLeft:'-' + ( smallLayer.markerW * smallLayer.zoomPercent )/2 + 'px',
                        borderRadius:( smallLayer.markerW * smallLayer.zoomPercent )/2 + 'px',
                        zIndex:2
                    }"/>   
                </el-popover>
                <div v-for="item in markData" :key="item.yAxis">
                    <img  v-if="item.alertUrl"
                        :src="item.alertUrl"
                        :style="{
                        width:( smallLayer.markerAlarmW * smallLayer.zoomPercent ) +'px',
                        height:( smallLayer.markerAlarmH * smallLayer.zoomPercent ) +'px',
                        position:'absolute',
                        left:item.xAxis + '%',
                        top:item.yAxis + '%',
                        cursor:'pointer',
                        marginTop:'-' + ( smallLayer.markerAlarmW * smallLayer.zoomPercent )/2 + 'px',
                        marginLeft:'-' + ( smallLayer.markerAlarmW * smallLayer.zoomPercent )/2 + 'px',
                        borderRadius:( smallLayer.markerAlarmW * smallLayer.zoomPercent )/2 + 'px',
                        zIndex:1
                    }"/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        layerInfo: {
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            layerPic: '', // 底图
            markData: [],
            smallLayer:{
                zoomPercent:1,
                markerW:32,
                markerH:32,      
                markerAlarmW:40,
                markerAlarmH:40,
            }
        }
    },
    created() {
        let that = this
        if(that.layerInfo) {
            that.layerPic = that.layerInfo.layeredGraphUrl
            that.markData = that.layerInfo.picturesMaker
            that.smallLayer.zoomPercent = (that.layerInfo.iconPercent || 100) / 100
        }
        that.$Ctl.loading(0)
    },
    methods: {
        closeLayer() {
            this.$emit('showOrCloseLayerMap')
        }
    },
    // watch: {
    //     layerInfo(val, oldVal) {
    //         let that = this
    //         if(val) {
    //             that.$Ctl.loading(0)
    //         }
    //     }
    // }
}
</script>
<style lang="scss">
.layered-map-wrap {
    background:rgba(18,34,50,1);
    .device-subtitle {
        margin-left: 10px;
        width: 200px;
        height: 26px;
        line-height: 26px;
        font-size: 20px;
        color: #55abf3;
        font-weight: bold;
        background: url("../../../../../assets/images/detailPage/icon-info.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        letter-spacing: 3px;
    }
    .close-btn {
        position: absolute;
        left: 98%;
        top: 12px;
        width: 13px;
        height: 13px;
        background: url(../../../../../assets/images/cards/close.png) center center no-repeat;
        background-size: cover;
        cursor: pointer;
    }
    .fencengtu-pic-parent {
        position: relative;
        margin-top: 20px;
        width: 100%;
        height: calc(100% - 50px);
        .fencengtu-pic {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
    }
}
.layered-map-maker-popper {
    color: #FFF;
    .el-popover__title {
        color: #FFF;
    }
}
</style>
